<template>
  <el-dialog v-model="dialogVisible" title="修改密码" width="500px" draggable>
    <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
      <el-form-item label="原密码" prop="oldPassword">
        <el-input v-model="form.oldPassword" type="password" placeholder="请输入原密码" />
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input v-model="form.newPassword" type="password" placeholder="请输入新密码" />
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input v-model="form.confirmPassword" type="password" placeholder="请再次输入新密码" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submit">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from "vue";
import md5 from "md5";
import { ElMessage } from "element-plus";
import { useUserStore } from "@/stores/modules/user";
import { ChangePassword } from "@/api/modules/user";
import { useRouter } from "vue-router";
import { LOGIN_URL } from "@/config";
const dialogVisible = ref(false);
const formRef = ref();
const userStore = useUserStore();
const form = ref({
  oldPassword: "",
  newPassword: "",
  confirmPassword: ""
});
const router = useRouter();
// 表单校验规则
const rules = {
  oldPassword: [{ required: true, message: "请输入原密码", trigger: "blur" }],
  newPassword: [
    { required: true, message: "请输入新密码", trigger: "blur" },
    {
      validator: (_rule: any, value: string, callback: any) => {
        if (value === form.value.oldPassword) {
          callback(new Error("新密码不能与原密码相同"));
        } else {
          callback();
        }
      },
      trigger: "blur"
    }
  ],
  confirmPassword: [
    { required: true, message: "请确认新密码", trigger: "blur" },
    {
      validator: (_rule: any, value: string, callback: any) => {
        if (value !== form.value.newPassword) {
          callback(new Error("两次密码不一致"));
        } else {
          callback();
        }
      },
      trigger: "blur"
    }
  ]
};

const openDialog = () => {
  dialogVisible.value = true;
  form.value.oldPassword = "";
  form.value.newPassword = "";
  form.value.confirmPassword = "";
};

const submit = () => {
  formRef.value.validate(async (valid: boolean) => {
    if (!valid) return;

    // const oldPwd = md5(form.value.oldPassword);
    // const newPwd = md5(form.value.newPassword);
    const params = {
      id: userStore.id,
      oldPwd: md5(form.value.oldPassword),
      newPwd: md5(form.value.newPassword)
    };

    try {
      // 调用修改密码 API
      const res = await ChangePassword(params);
      console.log("res", res);
      if (res.data?.code === "200") {
        ElMessage.success("密码修改成功");
        dialogVisible.value = false;
        userStore.setToken("");
        setTimeout(() => {
          router.push(LOGIN_URL);
        }, 2000); // 延迟 2000 毫秒（即 2 秒）
      } else {
        ElMessage.error("原密码错误");
      }
      dialogVisible.value = false;
    } catch (err) {
      ElMessage.error("修改失败");
    }
  });
};

defineExpose({ openDialog });
</script>
